<template>
    <div class="classic">
        <!-- 顶部导航栏 -->
        <navbar />
        <!-- 内容容器 -->
        <div class="content-warpper">
            <!-- 侧边栏 -->
            <sidebar class="sider" />
            <!-- 内容区 -->
            <app-main class="main" />
        </div>
    </div>
</template>
<script setup>
import AppMain from '../components/AppMain.vue'
import Navbar from '../components/NavBar/Navbar.vue'
import Sidebar from '../components/Sidebar/index.vue'
</script>
<style lang="scss" scoped>
@import '../../styles/variables.module.scss';
.classic {
.content-warpper{
    display: flex;
    box-sizing: border-box;
    .sider {
        transition: width 0.28s;
        width: $sideBarWidth !important;
        background-color: $menuBg;
        height: 100%;
        position: fixed;
        font-size: 16px;
        top: 50px;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow: hidden;
    }
    .main{
        transition: margin-left .28s;
        margin-left: $sideBarWidth;
        position: fixed;
    }
}
}
</style>